<template>
  <div class="container">
    <div class="search">
      <el-form ref="searchForm" size="small" :model="searchForm" inline label-width="90px">
        <el-form-item label="操作者id：" prop="admin_id">
          <el-input v-model="searchForm.admin_id" />
        </el-form-item>
        <el-form-item label="管理员名称" prop="admin_name">
          <el-input v-model="searchForm.admin_name" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="search(searchForm)">查 询</el-button>
          <el-button @click="reset(searchForm)">重 置</el-button>
        </el-form-item>
      </el-form>
    </div>
    <h3 class="title"><span />操作日志</h3>
    <el-table
      :data="tableData"
      :header-cell-style="{'text-align':'center'}"
      :cell-style="{'text-align':'center'}"
      border
      style="width: 100%;"
    >
      <el-table-column
        prop="id"
        label="ID"
        width="100px"
      />
      <el-table-column
        prop="admin_name"
        label="操作人"
      />
      <el-table-column
        prop="title"
        label="操作名称"
        width="130px"
      />
      <el-table-column
        prop="content"
        label="操作内容"
        show-overflow-tooltip
      />
      <el-table-column
        prop="addr"
        label="登录地点"
      />
      <el-table-column
        prop="ip"
        label="登录IP"
        width="130px"
      />
      <el-table-column
        prop="agent"
        label="登录设备"
      />
      <el-table-column
        prop="create_time"
        label="操作时间"
        width="170px"
      />
    </el-table>
    <el-pagination
      :current-page="page.currentPage"
      :page-sizes="page.pageSizes"
      :page-size="page.size"
      layout="total, sizes, prev, pager, next, jumper"
      :total="page.total"
      :hide-on-single-page="page.total<page.size?true:false"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
    />
  </div>
</template>
<script>
import logApi from '@/api/log'
export default {
  data() {
    return {
      searchForm: {
        admin_id: '',
        admin_name: ''
      },
      tableData: [],
      enterpriseName: '',
      operator: '',
      operationType: '',
      value1: '',
      value2: '',
      page: {
        total: 0,
        currentPage: 1,
        size: 10,
        pageSizes: [10, 20, 30, 40]
      }, // 分页器
      val: {}
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      this.val.page = this.page.currentPage
      this.val.limit = this.page.size
      this.val.admin_id = this.searchForm.admin_id
      this.val.admin_name = this.searchForm.admin_name
      logApi.optLog(this.val).then(res => {
        this.page.total = res.count
        this.tableData = res.data
      })
    },
    // 搜索
    search() {
      this.$refs.searchForm.validate((valid) => {
        this.page.currentPage = 1
        this.getList()
      })
    },
    // 重置搜索框
    reset(searchForm) {
      this.searchForm = {
        username: '',
        admin_id: ''
      }
    },
    // 分页规格改变
    handleSizeChange(val) {
      this.page.size = val
      this.page.currentPage = 1
      this.getList()
    },
    // 分页点击
    handleCurrentChange(val) {
      this.page.currentPage = val
      this.getList()
    },
    deleteRow(index, rows) {
      rows.splice(index, 1)
    },
    check(row) {
      this.$router.push({ name: 'info' })
    }
  }
}
</script>
<style lang="scss" scoped>
    .el-table{
  margin-bottom: 20px;
}
.search{
  background-color: #fff;
  padding: 35px 30px 13px;
  border-radius: 5px;
}
.operateData{
  width: 430px !important;
  .el-date-editor{
    float: right;
  }
}
</style>
